<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    form{width: 400px;height:500px;background:chartreuse;margin: 0 auto;}
      span{display: none}
      
    </style>
</head>
<body>
    <form action="">
        用户名称   ：        <input type="text" id="ipt-text" value=""><span></span><br><br>
        登录密码    ：        <input type="text" id="ipt-list" value=""><span></span><br><br>
        重复登录密码    ：   <input type="text" id="ipt-num" value=""><span></span><br><br>
        电子邮件     ：    <input type="text" id="ipt-emil" value=""><span></span><br><br>
        真实姓名   ：        <input type="text" id="ipt-xim" value=""><span></span><br><br>
        中奖手机号码：          <input type="text" id="ipt-ip"><span></span><br><br>
                      <input type="button"id="btn" value="注册">
    </form>
    <script>
    let ipt1=document.querySelector('#ipt-text')
    let ipt2=document.querySelector('#ipt-list')
    let ipt3=document.querySelector('#ipt-num')
    let ipt4=document.querySelector('#ipt-emil')
    let ipt5=document.querySelector('#ipt-xim')
    let ipt6=document.querySelector('#ipt-ip')
    let  btn=document.querySelector('#btn')
    let ap=document.querySelectorAll('span')
       
    //用户名称
       var bt=false
     ipt1.onfocus=function(){
          var a=/^[a-zA-Z]\w{6,12}$/
          var res=ipt1.value

          if(a.test(res)==true){
             
          console.log('正确')
            bt=true
            box()
          }
          if(a.test(res)==false){
              console.log('错误')
             ap.innerHTML = "输入有误"
          }
          }

     //用户密码
             var op=false
      ipt2.onfocus=function(){
          var a=/^[a-zA-Z]\w{6,12}$/
          var res=ipt2.value;
          if(a.test(res)==true){
            console.log('正确')
             op=true
             box()
          }
          if(a.test(res)==false){
            console.log('错误')
            ap.innerHTML = "输入有误"
          }
      }
      //重复密码
        var um=false
     ipt3.onfocus=function(){
         var a=ipt2.value;
         var b=ipt3.value;
         if(a==b){
             console.log('正确')
             um=true
             box()
         }
         if(a!=b){
             console.log('错误')
            ap.innerHTML = "输入有误"
         }
     }
 //电子邮件
         var bg=false
     ipt4.onfocus=function(){
          var a=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
          var res=ipt4.value;
          if(a.test(res)==true){
            console.log('正确')
            bg=true
            box()
          }
          if(a.test(res)==false){
            console.log('错误')
            ap.innerHTML = "输入有误"
          }
     }
      //真实姓名
         var pl=false
      ipt5.onfocus=function(){
          var a=/^[\u4e00-\u9fa5]{2,}$/
          var res=ipt5.value;
          if(a.test(res)==true){
            console.log('正确')
            pl=true
            box()
          }
          if(a.test(res)==false){
            console.log('错误')
            ap.innerHTML = "输入有误"
          }
      }
         //手机号码
         var kj=false
       ipt6.onfocus=function(){
          var a=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
          var res=ipt6.value;
          if(a.test(res)==true){
            console.log('正确') 
                kj=true
                box()

          }
          if(a.test(res)==false){
            console.log('错误')
            ap.innerHTML = "输入有误"
          }
      }


      function box(){
        btn.onclick=function(){
            if(ipt1&&ipt2&&ipt3&&ipt4&&ipt5&&ipt6){
               alert('提交')
            }
        }
      }
    </script>
</body>
</html>